<template>
  <slot></slot>
  <div ref="jcWebFaceMaskRef" v-if="showMask" :style="style" class="jc-web-face-mask"></div>
</template>

<style lang="ts">
export default {
  name: 'UseMask'
}
</style>

<script lang="ts" setup>
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
    bgColor: string
    opacity: number
    showMask: boolean
    maskIndex: number
  }>(),
  {
    bgColor: '#cdcdcd',
    opacity: 0.8,
    showMask: false,
    maskIndex: 15999999
  }
)

const style = ref(
  `--jc-web-face-mask-bgColor:${props.bgColor}; --jc-web-face-mask-index:${props.maskIndex}; --jc-web-face-mask-opacity:${props.opacity}`
)
</script>

<style lang="scss" scoped>
.jc-web-face-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: var(--jc-web-face-mask-index);
  background-color: var(--jc-web-face-mask-bgColor);
  opacity: var(--jc-web-face-mask-opacity);
}
</style>
